<template>
      <div>
              <el-tooltip class="item" effect="dark" content="搜索菜单" placement="bottom">
            <el-icon  style="color: var(--navColorFont)"
              @click.stop="handleSearch"
              class="llt-icon-size "><search /></el-icon>
          </el-tooltip>
           <SearchDocument @handleHide="handleHide" :show="searchBool" />
      </div>
</template>

<script setup lang="ts">
import {ref,reactive,getCurrentInstance } from 'vue';
    const internalInstance = getCurrentInstance();//获取当前实例
    const route = internalInstance?.appContext.config.globalProperties.$route;
import SearchDocument from "/@/components/search/search.vue";
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
let searchBool = ref(false);
 const state = reactive({
 })
const handleHide = (e: boolean) => {
  searchBool.value = !e;
};
const handleSearch = () => {
  searchBool.value = true;
};
defineProps({
  isCollapse: {
    type: Boolean,
    required: true,
  },
  
});

</script>

<style  scoped lang="scss" >
.menu-logo-box {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  height: 54px;
  background-color: #001529;

  img {
    width: 45px;
  }
  div {
    font-size: 22px;
    color: #fff;
    font-weight: bold;
    margin-left: 15px;
  }
}
</style>
